<!DOCTYPE html>
<html>

<head>
    <!-- 文字两端对齐 -->
    <meta charset="utf-8">
    <title>文字两端对齐</title>


    <style>

        .outer{
            width: 400px;
            height: 300px;
            background-color: bisque;
        }

        .inner{
            width: 50%;
            /* 核心，是相对于父元素宽度 */
            padding-bottom: 50%;
            background-color: red;
        }

    </style>

</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

</body>

</html>
